<template>
  <div>
    <el-row type="flex" align="middle" :gutter="20" style="margin-bottom: 10px">
      <el-col :span="8" style="display: flex; align-items: center"
        >项目简称：<el-select
          style="flex: 1"
          v-model="projectManagementId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.projectShortName"
            :value="item.id"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="8" style="display: flex; align-items: center"
        >计划类型：<el-select
          style="flex: 1"
          v-model="sourceType"
          placeholder="请选择"
        >
          <el-option label="编辑计划" :value="2"> </el-option>
          <el-option label="周计划" :value="1"> </el-option>
          <el-option label="月计划" :value="0"> </el-option> </el-select
      ></el-col>
      <el-col :span="8" style="display: flex; align-items: center"
        >计划周期：
        <el-date-picker
          v-model="planCycle"
          style="flex: 1"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker
      ></el-col>
    </el-row>
    <el-row type="flex" align="middle" :gutter="20" style="margin-bottom: 10px">
      <el-col :span="8" style="display: flex; align-items: center"
        >当前状态：<el-select
          style="flex: 1"
          v-model="progressState"
          placeholder="请选择"
        >
          <el-option label="延期" :value="0"> </el-option>
          <el-option label="正常" :value="1"> </el-option> </el-select
      ></el-col>
      <el-col :span="10"></el-col>
      <el-col :span="6" style="text-align: right">
        <el-button type="primary" @click="searchHandler">查询</el-button>
        <el-button plain @click="resetHandler">重置</el-button>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="renderData"
      border
      tooltip-effect="dark"
      style="width: 100%; height: 900px"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#606266', color: '#fff' }"
      height="620"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column
        label="项目简称"
        prop="projectShortName"
        align="center"
      />
      <el-table-column label="计划周期" align="center">
        <template slot-scope="scope">
          <p>{{ scope.row.planCycleStart }}</p>
          <!-- <p style="font-size: 0.8rem; color: #909399">至</p> -->
          <p>{{ scope.row.planCycleEnd }}</p>
        </template>
      </el-table-column>
      <el-table-column label="计划类型" prop="sourceTypeName" align="center" />
      <el-table-column label="线别" prop="workLineType" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.workLineType === 0">左右线</span>
          <span v-else-if="scope.row.workLineType === 1">左线</span>
          <span v-else>右线</span>
        </template>
      </el-table-column>
      <el-table-column label="计划/米" prop="totalDistance" align="center" />
      <el-table-column label="完成/米" prop="completeDistance" align="center" />
      <el-table-column label="施工进度" prop="workScheduling" align="center">
      </el-table-column>
      <el-table-column label="当前状态" prop="progressState" align="center">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.progressState === 0 ? 'warning' : ''"
            effect="dark"
            >{{ scope.row.progressState === 0 ? "延期" : "正常" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="责任人" prop="completeDistance" align="center">
        <template slot-scope="scope">
          <p v-for="el in scope.row.responsibleUsers" :key="el.id">
            {{ el.name }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="抄送人" prop="completeDistance" align="center">
        <template slot-scope="scope">
          <p v-for="el in scope.row.carbonCopyUsers" :key="el.id">
            {{ el.name }}
          </p>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getManagementList } from "../../../http/commonApi.js";
import {
  getMgProgressPage,
  exportMgProgress,
} from "../../../http/inTellingSchedule/progressList.js";
export default {
  data() {
    return {
      projectOptions: [],
      projectManagementId: null,
      sourceType: null,
      planCycle: [],
      progressState: null,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      isSearch: false,
      editShow: false,
      editTitle: "新增",
      planTypeOptions: [
        {
          label: "周计划",
          name: "周计划",
        },
        {
          label: "月计划",
          name: "月计划",
        },
        {
          label: "年计划",
          name: "年计划",
        },
      ],
      statusOptions: [
        {
          label: "正常",
          name: "正常",
        },
        {
          label: "延期",
          name: "延期",
        },
        {
          label: "超前",
          name: "超前",
        },
      ],
      renderData: [],
      multipleSelection: [],
    };
  },

  mounted() {
    this.getManagementListApi();
    this.getMgProgressPageApi(1, 10, 15);
  },

  methods: {
    // 查询
    searchHandler() {
      this.isSearch = true;
      this.currentPage = 1;
      this.getMgProgressPageApi(
        1,
        this.pageSize,
        this.projectManagementId,
        this.progressState,
        this.sourceType,
        this.planCycle[0],
        this.planCycle[1]
      );
    },
    // 重置
    resetHandler() {
      this.isSearch = true;
      this.currentPage = 1;
      this.pageSize = 10;
      this.projectManagementId = null;
      this.progressState = null;
      this.sourceType = null;
      this.planCycle = [];
      this.getMgProgressPageApi(1, 10, 15);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(v) {
      this.currentPage = 1;
      this.pageSize = v;
      if (this.isSearch === true) {
        this.getMgProgressPageApi(
          1,
          v,
          this.projectManagementId,
          this.progressState,

          this.sourceType,
          this.planCycle[0],
          this.planCycle[1]
        );
      } else {
        this.getMgProgressPageApi(1, v);
      }
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      if (this.isSearch === true) {
        this.getMgProgressPageApi(
          v,
          this.pageSize,
          this.projectManagementId,
          this.progressState,

          this.sourceType,
          this.planCycle[0],
          this.planCycle[1]
        );
      } else {
        this.getMgProgressPageApi(v, this.pageSize);
      }
    },
    // 督办
    toDoHandler(row) {
      console.log("row::: ", row);
    },
    /**
     * 接口
     */
    // 查询项目列表
    getManagementListApi() {
      getManagementList().then((res) => {
        if (res.code == 200) {
          console.log("res::: ", res);
          this.projectOptions = res.data;
        }
      });
    },
    // 分页查询
    getMgProgressPageApi(
      pageNum = 1,
      pageSize = 10,
      projectManagementId = null,
      progressState = null,

      sourceType = null,
      planCycleStart = "",
      planCycleEnd = ""
    ) {
      let params = {
        pageNum,
        pageSize,
        projectManagementId,
        progressState,
        sourceType,
        planCycleStart,
        planCycleEnd,
      };
      console.log("params::: ", params);
      getMgProgressPage(params).then((res) => {
        console.log("分页::: ", res);
        if (res.code == 200) {
          this.renderData = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    // 导出进度列表
    exportMgProgressApi(params) {
      exportMgProgress(params).then((res) => {
        console.log("res::: ", res);
        if (res.code == 200) {
          console.log("res::: ", res);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  position: fixed;
  bottom: 20px;
  right: 2%;
}
</style>
